import ComponentDemo from './01Component'
import PureComponent from './02PureComponent'
import Memo from './03memo'
// import { MyEventEmitter, EventView, EventViewA, EventViewB } from './05Context'
import A from './A'
import B from './B'
import { Child, Father } from './04callBack'
// import { MyComponent, Contacts } from './07CreactClass'
import ComponentView from './Ccompont'
import PureCom from './CpureCompoent'
import { useState } from 'react/cjs/react.development'
import { Button } from 'antd'
import './ReactApi.css';


import { version, memo } from 'react'

const ReactApiIndex = () => {
  const [name, setName] = useState('小毅')
  const [sex, setSex] = useState('男')

  function changeName(random) {
    setName("小毅" + random)
  }

  const changeSex = (random) => {
    setSex("男" + random)
  }

  console.log("父组件Reander");
  console.log("versionversion", version);

  const Foorter = () => {
    console.log("底部");
    return (
      <div>
        底部
      </div>
    )
  }
  const FoorterConstrol = (pre, next) => {
    if (pre.name === next.name) return true
  }

  const FoorterView = memo(Foorter, FoorterConstrol)


  return (
    <div className='Box'>
      <h2>父组件</h2>
      <Button onClick={() => changeName(Math.random())}>改变名字</Button>
      <Button onClick={() => changeSex(Math.random())}>改变性别</Button>

      <hr />
      <h2>PureCom 子组件</h2>
      <PureCom name={name} setName={setName} />

      <hr />
      <h2>ComponentView 子组件</h2>
      <ComponentView setSex={setSex} sex={sex} />
      <hr />
      {/* <MyComponent /> */}
      {/* <Contacts /> */}
      <FoorterView name={name} />


    </div>
  )
}




export default ReactApiIndex